<template>
  <view class="count-down-wrap">
    <view class="num-label" :class="{ 'count-down-ani': isShowCountdown }">{{
      countDownNum > 0 ? countDownNum : "GO"
    }}</view>
  </view>
</template>

<script setup name="CountDown">
import { onLaunch, onShow, onHide, onUnload } from "@dcloudio/uni-app";
import { reactive, ref, toRefs, watch, onMounted, onUnmounted, getCurrentInstance } from "vue"
import { storeToRefs } from "pinia";
import { useRunInfoStore } from "../../store/runInfo";
const useRunInfoData = useRunInfoStore()
const { countDownTimer, countDownNum, isShowCountdown } = storeToRefs(useRunInfoData)
const appInstance = getCurrentInstance().proxy
const props = defineProps({
})

const { tipTxt }  = toRefs(props)

const state = reactive({
  isShowModal: false,
  //是否显示模态框
  isShowModal: false,
  //默认数字
  num: 3,
  //定时器
  timer: null,
  //是否开启动画
  isAnimation: false
})

const $emit = defineEmits([
  "close",
]);

const alertDialogRef = ref(null)

//显示弹窗提示
const show = () => {
  state.isShowModal = true
}
//关闭模态框
const close = () => {
  state.isShowModal = false
  //关闭动画
  state.isAnimation = false
  //关闭之后恢复数字
  setTimeout(() => {
    state.num = 3
  }, 1000)
  //通知父组件
  $emit('close')
}
//开启动画定时器
const startAnimationTimer = () => {
  if (state.timer) {
    return
  }
  //标记开启动画
  state.isAnimation = true
  //开启定时
  state.timer = setInterval(() => {
    state.num--
    if (state.num <= 0) {
      //关闭定时器
      clearInterval(state.timer)
      state.timer = null
      //关闭弹窗(1s之后关闭,让GO!显示出来再关闭)
      setTimeout(() => {
        close()
      }, 1000)
    }
  }, 1000)
}


onUnmounted(() => {
  //清除定时器
  useRunInfoData.clearCountDownTimer()
})

onShow(() => {
 // startAnimationTimer()
})

onUnload(() => {
  //清除定时器
  useRunInfoData.clearCountDownTimer()
})

</script>

<style lang="scss">
.count-down-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .num-label {
    color: #ff0000;
    transform: scale(0);
    font-family: system-ui;
    font-weight: 900;
    font-size: 180rpx;
    color: #08CB8F;
    line-height: 706rpx;
    text-align: left;
    font-style: italic;
  }
}

.count-down-ani {
  animation: cdScaleAni 1s infinite;
  @keyframes cdScaleAni {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(3);
    }
  }
}
</style>
